<script>
import { create, getData, remove, update } from "@/views/product/trafficSource/api/options";

export default {
  name: "optionsManage",
  data() {
    return {
      show: false,
      table: {
        loading: false,
        data: []
      },
      query: {
        name: ""
      },
      options: {
        parent: []
      },
      form: {
        title: "新增",
        show: false,
        nowRow: undefined,
        param: {
          id: undefined,
          name: "",
          parentId: 0
        }
      },
      rules: {
        name: [
          { required: true, message: "请填写名称", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ],
        parentId: [
          { required: true, message: "请选择父级目录", trigger: "blur" },
          { type: "number", message: "请选择父级目录", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    parentOptionsOn() {
      return this.form.title === "新增" || (this.form.title === "修改" && this.form.nowRow.parentId !== 0);
    }
  },
  methods: {
    open() {
      this.getList();
      this.show = true;
    },
    getList() {
      this.table.loading = true
      getData(this, this.query, function(r) {
        this.table.data = r;
        this.options.parent = this.table.data.map(({ id, name }) => {
          return {
            id: id,
            name: name
          };
        });
        this.options.parent.unshift({ id: 0, name: "根目录" });
      }.bind(this),function(f) {
        this.table.loading = false
      }.bind(this));
    },
    resetQuery() {
      this.query.name = "";
      this.getList()
    },
    handleAdd(row) {
      this.form.nowRow = undefined
      this.form.param.parentId = row.id || 0;
      this.form.param.name = "";
      this.form.param.id = undefined;
      this.form.title = "新增";
      this.form.show = true;
    },
    handleUpdate(row) {
      this.form.nowRow = row
      this.form.param.parentId = row.parentId;
      this.form.param.name = row.name;
      this.form.param.id = row.id;
      this.form.title = "修改";
      this.form.show = true;
    },
    handleDelete(row) {
      remove(this,{id: row.id},function(r) {
        this.$message.success("删除成功")
        this.getList();
      }.bind(this))
    },
    commit() {
      let okFuc = function(r) {
        this.$message.success("操作成功")
        this.form.show = false;
        this.getList()
      }.bind(this);
      this.$refs["commitForm"].validate(function(valid) {
        if (valid) {
          if (this.form.param.id){
            update(this,this.form.param,okFuc)
          }else{
            create(this,this.form.param,okFuc)
          }
        }else{
          return false
        }
      }.bind(this))
    }
  }
};
</script>

<template>
  <div style="display: inline-block" v-role="'超级管理员'">
    <el-button size="mini" type="primary" @click="open" icon="el-icon-menu">选项管理</el-button>

    <el-drawer
      title="选项管理"
      :visible.sync="show"
      direction="btt"
      size="80%"
    >
      <div style="margin: 0 10px">
        <div>
          <div>
            <el-form :model="query" size="mini" :inline="true">
              <el-form-item label="名称">
                <el-input style="width: 200px" v-model="query.name" placeholder="请输入名称" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button size="small" type="success" @click="handleAdd">新增</el-button>
          </div>
        </div>

        <div style="margin: 10px 0">
          <el-table
            height="60vh"
            :data="table.data"
            row-key="id"
            :tree-props="{children: 'children'}"
          >
            <el-table-column label="编号" prop="id" />
            <el-table-column label="名称" prop="name" />
            <el-table-column
              label="操作"
            >
              <template
                slot-scope="{row}"
              >
                <el-button style="color: #2ed573" v-if="row.parentId === 0" size="mini" type="text" icon="el-icon-plus"
                           @click="handleAdd(row)">新增
                </el-button>
                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(row)">修改</el-button>
                <el-popconfirm
                  style="margin-left: 10px"
                  title="确认删除吗？"
                  @confirm="handleDelete(row)"
                >
                  <el-button slot="reference" style="color: #ff4757" size="mini" type="text" icon="el-icon-delete">
                    删除
                  </el-button>
                </el-popconfirm>

              </template>
            </el-table-column>

          </el-table>
        </div>
      </div>
    </el-drawer>

    <el-dialog
      :title="form.title"
      :visible.sync="form.show"
      width="30%"
    >
      <el-form :model="form.param" ref="commitForm" :rules="rules" label-width="60px" label-position="left" size="small">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.param.name"
                    maxlength="20"
                    show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="父级选项" label-width="80px" prop="parentId"
                      v-if="parentOptionsOn"
        >
          <el-select v-model="form.param.parentId" placeholder="请选择选项">
            <el-option
              v-for="(item,index) in options.parent"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
            <el-button @click="form.show = false">取 消</el-button>
            <el-button type="primary" @click="commit">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>